<template>
  <div>
    <Card>
      <el-row style="margin-bottom: 10px">
        <el-button size="small" type="primary" @click="addOrder">新增</el-button>
        <el-button size="small" type="success">修改</el-button>
        <el-button size="small" type="warning">删除</el-button>
      </el-row>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns"
              @on-delete="handleDelete"/>
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
      <el-pagination style="float: right; margin-top:10px" :page-size="10"
        background
        layout="prev, pager, next"
        :total="13">
      </el-pagination>
    </Card>
    <Modal v-model="modalVisible" :title="'新增工单'" @on-ok="ok" @on-cancel="cancel">
      <div style="margin-bottom: 10px;">
        <el-input placeholder="请输入编号" v-model="newAddOrder.clubId">
          <template slot="prepend">编号</template>
        </el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <el-input placeholder="请输入名称" v-model="newAddOrder.clubName">
          <template slot="prepend">俱乐部名称</template>
        </el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <el-input placeholder="0" v-model="newAddOrder.clubNum">
          <template slot="prepend">人数</template>
        </el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <el-input placeholder="深圳" v-model="newAddOrder.clubAddress">
          <template slot="prepend">职场</template>
        </el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <el-input placeholder="" v-model="newAddOrder.clubMaster">
          <template slot="prepend">负责人</template>
        </el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <el-input placeholder="请输入口号" v-model="newAddOrder.iconImg">
          <template slot="prepend">口号</template>
        </el-input>
      </div>
    </Modal>
  </div>
</template>

<script>
import Tables from '_c/tables'

export default {
  name: 'updmnt_page',
  components: {
    Tables
  },
  data () {
    return {
      newAddOrder: {},
      contentObj: {},
      modalVisible: false,
      columns: [
        { title: '编号', key: 'clubId', sortable: true },
        { title: '俱乐部名称', key: 'clubName' },
        { title: '俱乐部人数', key: 'clubNum', editable: true },
        { title: '职场', key: 'clubAddress' },
        { title: '负责人', key: 'clubMaster' },
        { title: '口号', key: 'iconImg' }
      ],
      tableData: [
        {
          'clubId': '101101',
          'clubName': '深圳羽毛球俱乐部',
          'clubNum': '55',
          'clubAddress': '深圳',
          'clubImg': require('@/assets/images/icon-club-3.png'),
          'clubMaster': '吴彦祖',
          'iconImg': '羽你相约，羽爱同行',
          'clubAdd': true
        },
        {
          'clubId': '101102',
          'clubName': '深圳篮球俱乐部',
          'clubNum': '61',
          'clubImg': require('@/assets/images/icon-club-2.png'),
          'clubAddress': '深圳',
          'clubMaster': '黎明',
          'iconImg': '团结拼搏，超越自我',
          'clubAdd': true
        },
        {
          'clubId': '101103',
          'clubName': '深圳乒乓球俱乐部',
          'clubNum': '32',
          'clubImg': require('@/imgs/icon-club-9.png'),
          'clubAddress': '深圳',
          'clubMaster': '梁朝伟',
          'iconImg': '乒无不克，乓无不胜'
        }, {
          'clubId': '101104',
          'clubName': '深圳游泳俱乐部',
          'clubNum': '28',
          'clubImg': require('@/imgs/icon-club-4.png'),
          'clubAddress': '深圳',
          'clubMaster': '孙杨',
          'iconImg': '齐心协力，谁与争锋'
        }, {
          'clubId': '101105',
          'clubName': '深圳足球俱乐部',
          'clubNum': '36',
          'clubImg': require('@/imgs/icon-club-5.png'),
          'clubAddress': '深圳',
          'clubMaster': '李华',
          'iconImg': ''
        }, {
          'clubId': '106',
          'clubName': '深圳瑜伽俱乐部',
          'clubNum': '32',
          'clubImg': require('@/imgs/icon-club-6.png'),
          'clubAddress': '深圳',
          'clubMaster': 'hhhh',
          'iconImg': ''
        }, {
          'clubId': '101107',
          'clubName': '深圳户外活动俱乐部',
          'clubNum': '31',
          'clubImg': require('@/imgs/icon-club-7.png'),
          'clubAddress': '深圳',
          'clubMaster': '薛之谦',
          'iconImg': ''
        }, {
          'clubId': '101108',
          'clubName': '深圳舞蹈俱乐部',
          'clubNum': '31',
          'clubImg': require('@/imgs/icon-club-8.png'),
          'clubAddress': '深圳',
          'clubMaster': '薛之谦',
          'iconImg': '舞动青春，快乐人生'
        },
        {
          'clubId': '102101',
          'clubName': '上海羽毛球俱乐部',
          'clubNum': '55',
          'clubImg': require('@/assets/images/icon-club-3.png'),
          'clubAddress': '上海',
          'clubMaster': '上海吴彦祖',
          'iconImg': '羽你相约，羽爱同行'
        },
        {
          'clubId': '102102',
          'clubName': '上海篮球俱乐部',
          'clubNum': '61',
          'clubImg': require('@/assets/images/icon-club-3.png'),
          'clubAddress': '上海',
          'clubMaster': '上海黎明',
          'iconImg': '团结拼搏，超越自我'
        }
      ]
    }
  },
  computed: {
    content () {
      return this.contentObj
    }
  },
  methods: {
    handleDelete (params) {

    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    },
    addOrder () {
      this.modalVisible = true
    },
    ok () {
      this.tableData.push(this.newAddOrder)
    },
    cancel () {

    }
  },
  mounted () {
    // getTableData().then(res => {
    //   this.tableData = res.data
    // })
  }
}
</script>

<style>

</style>
